// cd图片旋转逻辑
import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'
export default function userCd() {
  const cdImageRef = ref(null)
  const cdRef = ref(null)
  const store = useStore()
  const playing = computed(() => store.state.playing) // 歌曲播放状态

  const cdCls = computed(() => {
    return playing.value ? 'playing' : ''
  })
  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      syncTransfrom(cdRef.value, cdImageRef.value)
    }
  })
  function syncTransfrom(wrapper, inner) { // getComputedStyle动态获取
    const wrapperTransform = getComputedStyle(wrapper).transform// 获取到外层的img旋转角度
    const innerTransfrom = getComputedStyle(inner).transform // 获取到内层的img的旋转角度
    // 刚开始判断外层旋转角度是否我none不是就叠加里层和外层的旋转角度
    wrapper.style.transform = wrapperTransform === 'none' ? innerTransfrom : innerTransfrom.concat('', wrapperTransform) // concat字符串叠加 外层的旋转角度
  }
  return {
    cdCls,
    cdRef,
    cdImageRef
  }
}
